<template>
	<!--推荐人才-筛选-->
	<view>
		<view class="my-head">
			<view class="head-left fl-t">
				<u-icon @click="screenClose" name="close"></u-icon>
			</view>
			<view class="title fl-c"> 筛选 </view>
			<view class="head-right"> </view>
		</view>
		<view class="occupy"></view>
		<view class="center">
			<view v-for="(list, index) in lists" :key="index">
				<view v-if="list.title=='学历要求(多选)'">
					<view class="screen-title">{{ list.title }}</view>
					<view class="fl-w tabs">
						<view class="li" v-for="(item, i) in list.data" :key="i"
							:class="{ activation:tags.findIndex(res => res.FullName == item.FullName) != -1}"
							@click="tagsChange(list, i, item)">
							{{ item.FullName }}
						</view>
					</view>
				</view>
				<view v-else>
					<view class="screen-title">{{ list.title }}</view>
					<view class="fl-w tabs">
						<view class="li" v-for="(item, i) in list.data" :key="i"
							:class="{ activation: list.activation == i }" @click="clickItem(list, i, item)">
							{{ item.FullName }}
						</view>
					</view>
				</view>

			</view>
			<view style="width: 100%; height: 200rpx"></view>
			<view class="fl-lr-c bottom-but">
				<view class="but1 fl-c" @click="Reset()">重置</view>
				<view class="but2 fl-c" @click="preservation">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				load: true, //是否加载完成
				lists: [{
						activation: [0],
						val: "不限",
						id: 1,
						title: "学历要求(多选)",
						data: [
							"不限",
							"初中及以下",
							"中专/中技",
							"高中",
							"大专",
							"本科",
							"硕士",
							"博士",
						],
					},
					{
						activation: 0,
						val: "不限",
						id: null,
						title: "薪资待遇",
						data: [
							"不限",
							"3k以下",
							"3k~5k",
							"5k~10k",
							"10k~20k",
							"20k~30k",
							"30k以上",
						],
					},
					{
						activation: 0,
						val: "不限",
						id: null,
						title: "经验要求",
						data: [
							"不限",
							"在校生",
							"应届生",
							"1年以内",
							"1~3年",
							"3~5年",
							"5~10年",
							"10年以上",
						],
					},
					{
						activation: 0,
						val: "不限",
						id: null,
						title: "性别",
						data: [{
								FullName: "不限",
								EnCode: null,
								Id: null,
								children: [],
							},
							{
								FullName: "男",
								EnCode: "1",
								Id: "1",
								children: [],
							},
							{
								FullName: "女",
								EnCode: "2",
								Id: "2",
								children: [],
							},
						],
					},
				],
				tags: [{
					FullName: '不限',
					EnCode: ''
				}],
				newTags: ''
			};
		},
		components: {},
		computed: {},
		onLoad(o) {
			// o = JSON.parse(o.data);

			// if (o.state) { //true
			// 	this.lists = o.list;
			// } else { //加载数据
			// 	this.load = false;
			// 	this.getIndustry()
			// }
			console.log(this.lists);
			if (this.lists && this.lists[0].activation) {
				this.lists[0].activation.forEach(item => {

					this.lists[0].data.forEach((res, index) => {
						// console.log(res);
						if (item == index) {
							this.newTags = res
							return
						}
					})
				})
				// this.tags=this.newTags
			}
			console.log(this.newTags);
			this.getIndustry();
		},
		created() {},
		onShow() {},
		// 初次渲染
		onReady() {},
		// 挂载完成调用
		mounted() {},
		watch: {
			"$store.state.add": {
				handler(val) {
					if (val) {
						this.lists = JSON.parse(JSON.stringify(val));
						console.log(this.lists);
					}
				},
				immediate: true,
			},
			// vuex监听
			"$store.state.tags": {
				handler(val) {
					if (val) {
						// this.lists = JSON.parse(JSON.stringify(val));
						console.log(val);
						this.tags = JSON.parse(JSON.stringify(val))
					}
				},
				immediate: true,
			},
			tags: {
				handler(val) {
					console.log(val);
					if (!this.lists[0].activation.length > 0) {

						if (val == 0) {
							this.tags.push({
								FullName: '不限',
								EnCode: ''
							})
						}
					}

				}
			}
		},
		// 计算方法
		methods: {
			getIndustry() {
				// 薪资待遇
				let sa = {
					FullName: "不限",
					EnCode: null,
					children: [],
				};
				this.$http.dic.DataSelector(385800457572485).then((res) => {
					if (res.Success) {
						// console.log("-------薪资要求--------------");
						this.lists[1].data = res.Result;
						this.lists[1].data.unshift(sa);
						// console.log(this.lists);
					}
				});
				// 学历要求
				this.$http.dic.DataSelector(385800548573317).then((res) => {
					if (res.Success) {
						// console.log("-------学历要求--------------");
						this.lists[0].data = res.Result;
						this.lists[0].data.unshift(sa);

						// console.log(this.lists);
					}
				});
				// 工作经验
				this.$http.dic.DataSelector(385800643113093).then((res) => {
					if (res.Success) {
						// console.log("-------经验要求--------------");
						this.lists[2].data = res.Result;
						this.lists[2].data.unshift(sa);
						// console.log(this.lists);
					}
				});

			},
			screenClose() {
				uni.navigateBack();
			},
			tagsChange(item, index, val) {
				console.log(item, index, val);
				// item.activation = index
				if (index != 0) {
					if (this.tags.findIndex(res => res.FullName == val.FullName) != -1) {
						this.tags.splice(this.tags.findIndex(i => i.FullName == val.FullName), 1)
					} else {
						if (this.tags[0].FullName == '不限') {
							this.tags.splice(0, 1)
						}
						this.tags.push({
							FullName: val.FullName,
							EnCode: val.EnCode,

						})
					}

				} else {
					this.tags = []
					this.tags.push({
						FullName: '不限',
						EnCode: ''
					})

				}
				item.activation = this.tags.map(item => {
					return Number(item.EnCode)
				})
				item.val = val;
			},
			clickItem(item, index, val) {
				// console.log(item, index, val);
				item.activation = index;
				item.id = val.EnCode;
				item.val = val;
			},
			Reset() {
				this.lists.forEach((item, index) => {
					item.activation = 0;
					item.id = null;
					item.val = "不限";
				});
				this.tags = []
			},
			preservation() {
				console.log(this.tags);
				console.log(this.lists);
				// this.lists[0]=this.tags
				// .map(item=>{
				// 	return Number(item.EnCode) 
				// })
				this.$store.commit("setAdd", this.lists);
				this.$store.commit('setTags', this.tags);
				// uni.$emit("add", {listData: this.lists})
				// console.log('111',this.lists);
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 50rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 999;
		background-color: #fff;
		border-bottom: 1rpx solid #ccc;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.head-left,
		.head-right {
			width: 100rpx;
		}
	}

	.center {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.screen-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #313131;
			margin: 30rpx 0;
		}

		.tabs {
			view {
				width: 216rpx;
				height: 64rpx;
				background: #f7f7f7;
				border-radius: 4rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				line-height: 64rpx;
			}

			.li:nth-child(3n + 2) {
				margin: 0 20rpx 20rpx;
			}

			.activation {
				color: #1684fc;
				background: #f1f8ff;
				border: 1rpx solid #1684fc;
				box-sizing: border-box;
			}
		}

		.bottom-but {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.but1 {
				width: 216rpx;
				height: 88rpx;
				background: #f7f7f7;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.but2 {
				width: 450rpx;
				height: 88rpx;
				background: #1684fc;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
</style>